<?php
session_start();
if(isset($_GET['src'])) {
    require('../../Gregphoto_Image.php');
    $file = '../images/' . $_GET['src'] . '.jpg';
    $height = (isset($_GET['height'])) ? $_GET['height'] : 100;
    $image = new Gregphoto_Image($file);
    $image->setJpegQuality(80);
    $image->setMaxHeight($height);
    $image->resize(Gregphoto_Image::MAX_HEIGHT);
    $image->showThumbnail();
    exit();   
}
?>
<html>
<head>
    <title>Sample Gallery</title>
    <style>
	body {
	    background: #4F4F4F;
	}
	
	#images {
	   background: #FFFFFF;
	   padding: 10px;
	   width: 900px;
	}
	
	#images img {
	    border: 1px solid #000000;
	    margin: 0 5px;
	    cursor: pointer;
	}
	
	#mainImage {
	    margin-top: 20px;
	    border: 2px solid #000000;
	    padding: 5px;
	    background: #FFFFFF;
	}
    </style>
    <script>
	var currentImage;
	function showImage(imgName) {
	    if (imgName != currentImage) {
		var imgObj = document.getElementById('mainImage');
		imgObj.src = 'gallery.php?height=250&src=' + imgName;
		currentImage = imgName;
	    }
	}
    </script>
</head>
<body onLoad="showImage('fan');">
    <div align="center">
	<div id="images">
	    <img src="gallery.php?src=fan" onClick="showImage('fan')">
	    <img src="gallery.php?src=beach" onClick="showImage('beach')">
	    <img src="gallery.php?src=pan2" onClick="showImage('pan2')">
	    <img src="gallery.php?src=tripod" onClick="showImage('tripod')">
	</div>
	
	<img src="" id="mainImage">
    </div>
</body>
</html>
    